.mvs-container {
  padding-top: 5vh;
}

.filter-wrap {
  margin: 0 5vw;
  .section-wrap {
    margin-bottom: 5vh;
    display: flex;
    align-items: center;
    cursor: pointer;

    span {
      font-size: 0.75rem;
    }

    ul {
      display: flex;
      list-style: none;
      margin: 0;

      li {
        margin-right: 3vw;

        .title {
          color: black;
          border-radius: 0.25rem;
        }

        .title-active {
          background-color: #CCFF99;
          box-sizing: border-box;
          padding: 0.1rem;
          border-radius: 0.25rem;
        }
      }
    }
  }
}

.mvs {
  margin: 0 3vw;
  .items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .item {
      width: 20%;
      cursor: pointer;
      margin: 1vh 1.5vw;

      .img-wrap {
        width: 100%;
        position: relative;

        img {
          width: 100%;
          border-radius: 0.25rem;
        }
        .num-wrap{
          position: absolute;
          color: white;
          top: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.5rem;
          padding-right: 1vw;
          padding-top: 1vh;
          .icon-play{
            font-size: 1rem;
            margin-right: .25vw;
          }
        }
      }

      .info-wrap{
        .name{
          font-size: 1rem;
        }
        .singer{
          font-size: 0.75rem;
        }
      }
    }
  }
}

.pagination{
  margin-bottom: 15vh;
  text-align: center;
}